<template>
  <div class="mod-demo-ueditor" @mouseover="handleInput">
    <script
      :id="ueId"
      class="ueditor-box"
      type="text/plain"
      style="width: 100%; height: 100px;"
    ></script>
    <input type="hidden" :value="value"/>
  </div>
</template>

<script>
import ueditor from "ueditor";
export default {
  data() {
    return {
      ue: null,
      ueId: `J_ueditorBox_${new Date().getTime()}`,
      ueContent: ""
    };
  },
  props: {
    value: String
  },
  mounted() {
    this.ue = ueditor.getEditor(this.ueId, {
      serverUrl: "http://localhost:8088", // 服务器统一请求接口路径
      zIndex: 3000
    });
    this.setContent();
  },
  beforeUpdate() {
    this.ue = ueditor.getEditor(this.ueId, {
      serverUrl: "http://localhost:8088", // 服务器统一请求接口路径
      zIndex: 3000
    });
    this.setContent();
  },
  methods: {
    handleInput() {
      this.ue.ready(() => {
        this.getContent();
        this.$emit("input", this.ueContent);
      });
    },
    getContent() {
      this.ue.ready(() => {
        this.ueContent = this.ue.getContent();
        console.log(this.ueContent);
      });
    },
    setContent() {
      this.ue.ready(() => {
        this.ue.setContent(this.value);
        this.ueContent = this.value;
      });
    }
  }
};
</script>

<style lang="scss">
.mod-demo-ueditor {
  position: relative;
  z-index: 510;
  > .el-alert {
    margin-bottom: 10px;
  }
}
</style>
